<template>
    <!-- 电台详情页左边 -->
    <div class="detail_l">
        <div class="detail_t">
            <div class="header">
                <img :src="detail.picUrl" alt="">
                <i class="mask"></i>
            </div>
            <div class="info">
                <div class="title">
                    <i class="radio"></i>
                    <h2>{{ detail.name }}</h2>
                </div>
                <div class="user">
                    <img :src="dj.avatarUrl" alt="">
                    <span class="name" @click="$router.push(`/user/${dj.userId}`)">{{ dj.nickname }}</span>
                </div>
                <div class="btn">
                    <a class="ding" title="订阅">
                        <i class="ding_l">
                            <span>订阅({{ detail.subCount }})</span>
                        </i>
                        <i class="ding_r"></i>
                    </a>
                    <a class="play" title="播放" @click="play">
                        <i class="play_l">
                            <span>播放全部</span>
                        </i>
                        <i class="play_r"></i>
                    </a>
                    <a class="share" title="分享">
                        <i class="share_l">
                            <span>分享({{ detail.shareCount }})</span>
                        </i>
                        <i class="share_r"></i>
                    </a>
                </div>
                <div class="dec">
                    <a class="cat" v-show="detail.category">{{ detail.category }}</a>
                    {{ detail.desc }}
                </div>
            </div>
        </div>
        <div class="detail_b">
            <div class="titles">
                <div class="titles_l">
                    <h3>节目列表</h3>
                    <span>共{{ programs.length }}期</span>
                </div>
                <!-- 升序降序按钮 -->
                <div class="titles_r">
                    <div class="btn" v-show="!isAsc">
                        <img class="desc active" src="@/assets/images/降序.png" alt="" @click="descBtnFn" title="降序">
                        <img class="asc" src="@/assets/images/升序.png" alt="" @click="ascBtnFn" title="升序">
                    </div>
                    <div class="btn" v-show="isAsc">
                        <img class="desc" src="@/assets/images/降序.png" alt="" @click="descBtnFn" title="降序">
                        <img class="asc active" src="@/assets/images/升序.png" alt="" @click="ascBtnFn" title="升序">
                    </div>
                </div>
            </div>
            <table>
                <tr v-for="(item, index) in programs" :key="index">
                    <td class="col1">
                        <div class="hd">
                            <span>{{ item.serialNum }}</span>
                            <span class="play" @click="playprogram(index)" v-show="!item.mainSong.starred"></span>
                            <span class="active" v-show="item.mainSong.starred"></span>
                        </div>
                    </td>
                    <td class="col2 ellipsis">
                        <a @click="$router.push(`/program/${item.id}`)">{{ item.name }}</a>
                    </td>
                    <td class="col3">
                        <div class="show">
                            <a title="添加到播放列表" class="a1"></a>
                            <a title="收藏" class="a2"></a>
                            <a title="分享" class="a3"></a>
                        </div>
                    </td>
                    <td class="col4">
                        <span>播放{{ item.listenerCount | handleCount }}</span>
                    </td>
                    <td class="col5">
                        <span>赞{{ item.likedCount | handleCount }}</span>
                    </td>
                    <td class="col6">
                        <span>{{ item.scheduledPublishTime | showDate }}</span>
                    </td>
                    <td class="col7">
                        <span>{{ min(item) }}:{{ sec(item) }}</span>
                    </td>
                </tr>
            </table>
        </div>
        <MusicPlay :ids="ids" :imgUrl="imgUrl" :isPlay="isPlay" />
    </div>
</template>

<script>
import { DjRadioDetailApi, DjProgramApi, DjProgramOldApi } from "@/request/api";
import { formatDate } from '@/assets/utils/date';
import MusicPlay from "@/components/MusicPlay.vue";
export default {
    data () {
        return {
            detail: [],
            dj: [],
            programs: [],
            ids: 0,
            imgUrl: "https://img2.baidu.com/it/u=1611088966,2458167776&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            isPlay: false,
            isAsc: false,
        }
    },
    components: {
        MusicPlay,
    },
    filters: {
        showDate: function(value) {
            let date = new Date(value);
            // return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
            return formatDate(date, 'yyyy-MM-dd');
        },
        handleCount(count){
            if(count >= 100000){
                count = (count - count%10000)/10000 + '万'
            }
            return count
        },
    },
    computed: {
        id() {
            return this.$route.params.id;
        }
    },
    created() {
        DjRadioDetailApi(this.id).then((res) => {
            // console.log(res);
            this.detail = res.data.data;
            this.dj = res.data.data.dj;
        })
        DjProgramApi(this.id).then((res) => {
            // console.log(res);
            this.programs = res.data.programs;
        })
    },
    methods: {
        min(item) {
          if (parseInt(item.duration / 60000) < 10)
          return "0" + parseInt(item.duration / 60000);
          else return parseInt(item.duration / 60000);
        },
        sec(item) {
          let x = parseInt(item.duration / 60000);
          let y = parseInt(item.duration / 1000 - x * 60);
          if (y < 10) return "0" + y;
          else return y;
        },
        descBtnFn() {
            this.isAsc = !this.isAsc;
            DjProgramApi(this.id).then((res) => {
                // console.log(res);
                this.programs = res.data.programs;
            })
        },
        ascBtnFn() {
            this.isAsc = !this.isAsc;
            DjProgramOldApi(this.id).then((res) => {
                // console.log(res);
                this.programs = res.data.programs;
            })
        },
        play() {
            this.programs.forEach(item=>item.mainSong.starred=false);
            this.programs[0].mainSong.starred = true;
            this.ids = this.programs[0].mainTrackId;
            this.imgUrl = this.programs[0].coverUrl;
            this.isPlay = true;
        },
        playprogram(index) {
            this.programs.forEach(item=>item.mainSong.starred=false);
            this.programs[index].mainSong.starred = true;
            this.ids = this.programs[index].mainTrackId;
            this.imgUrl = this.programs[index].coverUrl;
            this.isPlay = true;
        },
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.detail_l {
    width: 640px;
    background-color: #fff;
    border-left: 1px solid #D7D7D7;
    padding: 40px;
    .detail_t {
        width: 640px;
        min-height: 208px;
        display: flex;
        margin-bottom: 20px;
        .header {
            position: relative;
            width: 208px;
            text-align: center;
            img {
                width: 208px;
                height: 208px;
            }
            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 208px;
                height: 208px;
                display: block;
                background: url("../../assets/images/public/coverall.png") no-repeat 0 -1285px;
            }
        }
        .info {
            width: 410px;
            margin-left: 20px;
            .title {
                margin-bottom: 10px;
                width: 410px;
                display: flex;
                .radio {
                    width: 55px;
                    height: 24px;
                    display: block;
                    margin-right: 6px;
                    background: url("../../assets/images/public/icon.png") no-repeat 0 -1014px;
                }
                h2 {
                    width: 86%;
                    line-height: 24px;
                    font-size: 20px;
                    color: #333;
                }
            }
            .user {
                width: 100%;
                height: 35px;
                line-height: 35px;
                margin-bottom: 20px;
                font-size: 12px;
                display: flex;
                align-items: center;
                img {
                    cursor: pointer;
                    width: 35px;
                    height: 35px;
                }
                .name {
                    color: #0c73c2;
                    margin: 0 10px;
                    &:hover {
                      cursor: pointer;
                      text-decoration: underline;
                    }
                    .star {
                        width: 13px;
                        height: 13px;
                    }
                }
            }
            .btn {
                height: 31px;
                display: flex;
                margin-bottom: 20px;
                a {
                    margin-right: 5px;
                    span {
                        font-size: 12px;
                        color: #333;
                        line-height: 31px;
                        padding: 0 0 0 30px;
                    }
                }
                .ding {
                    display: flex;
                    span {
                        font-size: 12px;
                        color: #fff;
                        line-height: 31px;
                        padding: 0 0 0 30px;
                    }
                    .ding_l {
                        padding-right: 2px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: 0 -2125px;
                    }
                    .ding_r {
                        width: 10px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: -240px -2163px;
                    }
                    &:hover {
                        cursor: pointer;
                        .ding_l {
                            padding-right: 2px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: 0 -2516px;
                        }
                        .ding_r {
                            width: 10px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: -240px -2558px;
                        }
                    }
                    
                }
                .play {
                    display: flex;
                    .play_l {
                        width: 85px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: 0 -2285px;
                    }
                    .play_r {
                        width: 10px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: -240px -2325px;
                    }
                    &:hover {
                        cursor: pointer;
                        .play_l {
                            width: 85px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: 0 -2680px;
                        }
                        .play_r {
                            width: 10px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: -240px -2720px;
                        }
                    }
                    
                }
                .share {
                    display: flex;
                    .share_l {
                        padding-right: 2px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: 0 -1225px;
                    }
                    .share_r {
                        width: 5px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: -245px -100px;
                    }
                    &:hover {
                        cursor: pointer;
                        .share_l {
                            padding-right: 2px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: 0 -1268px;
                        }
                        .share_r {
                            width: 5px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: -245px -182px;
                        }
                    }
                }
            }
            .dec {
                font-size: 12px;
                margin-top: 4px;
                line-height: 18px;
                color: #666;
                .cat {
                    font-size: 12px;
                    color: #cc0000;
                    border: 1px solid #cc0000;
                    line-height: 16px;
                    padding: 0 6px;
                    vertical-align: middle;
                    margin: 0 5px 0 0;
                }
            }
        }
    }
    .detail_b {
        .titles {
            width: 640px;
            height: 40px;
            border-bottom: 2px solid @red;
            display: flex;
            align-items: center;
            justify-content: space-between !important;
            .titles_l {
                display: flex;
                align-items: center;
                h3 {
                    font-size: 20px;
                    line-height: 28px;
                    font-weight: normal;
                    color: #333;
                }
                span {
                    margin: 9px 0 0 20px;
                    color: #666;
                    font-size: 12px;
                }
            }
            .titles_r {
                .btn {
                    display: flex;
                    align-items: center;
                }
                // 降序按钮
                .desc {
                    cursor: pointer;
                    width: 25px;
                    height: 25px;
                    display: block;
                    border: #d9d9d9 1px solid;
                    border-radius: 5px 0 0 5px;
                    &:hover{
                        border: @red 1px solid;
                    }
                }
                // 升序按钮
                .asc {
                    cursor: pointer;
                    width: 25px;
                    height: 25px;
                    display: block;
                    border: #d9d9d9 1px solid;
                    border-radius: 0 5px 5px 0;
                    &:hover{
                        border: @red 1px solid;
                    }
                }
                .active {
                    border: @red 1px solid;
                }
            }
        }
        table {
            border: 1px solid #d9d9d9;
            border-top: 0;
            width: 100%;
            tr {
                height: 55px;
                display: flex;
                align-items: center;
                font-size: 12px;
                &:nth-of-type(even) {
                    background: #f7f7f7;
                }
                &:nth-of-type(odd) {
                    background: #fff;
                }
                &:hover .show {
                    display: block !important;
                }
                &:hover {
                    background-color: #f1f1f1;
                }
            }
            td {
                height: 55px;
                line-height: 55px;
            }
            .col1 {
                padding: 0 10px;
                width: 60px;
                display: flex;
                align-items: center;
                .hd {
                    width: 60px;
                    line-height: 18px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    span {
                        font-size: 12px;
                        color: #999;
                    }
                    .play {
                        width: 17px;
                        height: 17px;
                        display: inline-block;
                        background: url("@/assets/images/public/table.png") no-repeat;
                        background-position: 0 -103px;
                        &:hover {
                            cursor: pointer;
                            background-position: 0 -128px;
                        }
                    }
                    .active {
                        width: 17px;
                        height: 17px;
                        display: inline-block;
                        background: url("../../assets/images/public/table.png") no-repeat -20px -128px;
                    }
                }
            }
            .col2 {
                padding: 0 10px 0 0;
                width: 160px;
                a {
                    font-size: 12px;
                    color: #333;
                    &:hover {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                }
            }
            .col3 {
                width: 69px;
                display: flex;
                align-items: center;
                .show {
                    width: 69px;
                    height: 18px;
                    display: flex;
                    display: none;
                    a {
                      margin: 2px 5px 0 0;
                      width: 18px;
                      height: 16px;
                      display: block;
                      float: left;
                      background: url("../../assets/images/public/table.png") no-repeat;
                      &:hover {
                        cursor: pointer;
                      }
                    }
                    .a1 {
                      width: 13px;
                      height: 13px;
                      margin-top: 2px;
                      background: url("../../assets/images/public/icon.png") no-repeat;
                      background-position: 0 -700px;
                    
                      &:hover {
                        background-position: -22px -700px;
                      }
                    }
                    .a2 {
                      background-position: 0 -174px;
                      &:hover {
                        background-position: -20px -174px;
                      }
                    }
                    .a3 {
                      background-position: 0 -195px;
                      &:hover {
                        background-position: -20px -195px;
                      }
                    }
                }
            }
            .col4 {
                width: 60px;
                display: flex;
                span {
                    font-size: 12px;
                    color: #666;
                }
            }
            .col5 {
                padding: 0 0 0 10px;
                width: 70px;
                span {
                    font-size: 12px;
                    color: #666;
                }
            }
            .col6 {
                padding: 0 10px;
                width: 90px;
                span {
                    font-size: 12px;
                    color: #999;
                }
            }
            .col7 {
                padding: 0 10px;
                width: 40px;
                span {
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }
}
</style>